<template>
    <div class="user-box">
      <div class="user-entirety">
        <h2 class="user-use">他们正在使用</h2>
        <div class="user-comment">
          <div class="comments active">

            <div class="comments">
              {{ users[active].title }}
          </div>
        </div>
      </div>
      <div class="users">
          <div class="user-portrait"
          :class="{active : active === index}"
          v-for="(user,index) in users"
          @click="active = index"
          :key="user.id"
          >
            <img class="user-portrait-picture" :src="user.picture" alt="">
            <div class="user-info">
              <div class="user-name">{{ user.name }}</div>
              <div class="user-corp">{{ user.corp }}</div>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      users: [
        {
          id: 1, name: 'Thomas', corp: '小米路由器', picture: 'https://wj.qq.com/image/avatar_thomas.png', title: '我们的问卷投放量很大，每次问卷调查都是一次品牌形象宣传，因此除了问卷功能，更注重系统环境的稳定性。在评估后，我们决定选择腾讯问卷，事实证明百万的问卷数据承载毫无压力，可靠！',
        },
        {
          id: 2, name: '315晚会', corp: '中央电视台', picture: 'https://wj.qq.com/image/avatar_cctv.png', title: '腾讯问卷提供的调查问卷模板可订制化服务，增加了页面趣味性，降低了用户点击成本，问卷的回收率简单轻松翻倍，还收获了不少用户的好评。',
        },
        {
          id: 3, name: '火车票调查', corp: '同程网', picture: 'https://wj.qq.com/image/avatar_tongcheng.png', title: '界面简洁轻量，QQ登录即可免费使用，问卷发布快捷方便，再也不用人工处理问卷数据，大大节省了调研成本，是很赞的自助式在线问卷调查服务的平台！',
        },
        {
          id: 4, name: '滴滴代驾', corp: '滴滴', picture: 'https://wj.qq.com/image/avatar_didi.png', title: '腾讯问卷在编辑方式上更加灵活高效，不同用户环境下的交互体验更友好，前端稳定性、安全性表现尤为优异，为海量车主调研项目提供了可靠的基础支撑，用起来更踏实！',
        },
        {
          id: 5, name: '链家网', corp: '链家', picture: 'https://wj.qq.com/image/avatar_lianjia.png', title: '腾讯问卷的扁平化设计做得很好，交互设计的体验也很棒，在对比多个平台后选择使用腾讯问卷，帮我轻轻松松完成了调研！',
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.user-box {
  background-color: #fafafa;
}
.user-entirety {
  width: 1040px;
  padding: 0 20px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.user-use {
  font-size: 20px;
  font-weight: 400;
  color: #999;
  padding: 35px 0 0;
  text-align: center;
}
.comments {
  padding-bottom:72px;
  height: 2em;
}
.users {
  padding: 0 20px;
  border-top: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
}
.user-portrait {
  display: flex;
  align-items: center;
  height: 126px;
  position: relative;
  cursor: pointer;
  opacity: .3;
}
.user-portrait:hover,
.user-portrait.active{
  opacity: 1;
}

.user-portrait.active:after,
.user-portrait:hover:after {
  content: '';
  background-color: #58a6e7;
  height: 3px;
  width: 54px;
  top: -2px;
  left: 0;
  position: absolute;
}
.user-portrait-picture {
  width: 50px;
  height: 50px;
}
.user-name {
  font-size: 14px;
  margin-left: 10px;
}
.user-corp {
  color: #999;
  font-size: 14px;
  margin-left: 10px;
  margin-top: 3px;
}

</style>
